<template>
    <div class="app-container">
        <el-button type="text" icon="el-icon-back" style="margin-bottom: 10px;" @click="back()">返回</el-button>
        <!-- 添加或修改新闻对话框 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="auto">
            <el-form-item label="栏目" prop="fkNewsColumnId">
                <el-cascader v-model="form.fkNewsColumnId" :options="newsTreeData"
                    :props="{ expandTrigger: 'hover', emitPath: false, value: 'id' }"></el-cascader>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="副标题" prop="viceTitle">
                <el-input v-model="form.viceTitle" type="textarea" :rows="2" placeholder="请输入副标题" />
            </el-form-item>
            <el-form-item label="封面" prop="cover">
                <image-upload v-model="form.cover" :limit="1" />
            </el-form-item>

            <!-- <el-form-item label="内容类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择内容类型">
                    <el-option v-for="dict in dict.type.news_content_type" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="内容">
                <CkEditor ref="ckeditor" @updataValue="(value) =>form.content = value" />
                <!-- <editor v-model="form.content" :min-height="192" /> -->
            </el-form-item>
            <el-form-item label="链接" prop="link">
                <el-input v-model="form.link" placeholder="请输入链接" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio v-for="dict in dict.type.news_column_status" :key="dict.value" :label="dict.value">{{
                        dict.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">{{$route.query.mode ==='edit' ? '保存修改' :'保 存'}}</el-button>
            <el-button @click="cancel">重 置</el-button>
        </div>
    </div>
</template>

<script>
import { addNews, updateNews, getNewTrees, getNews } from "@/api/wcsoft/news";
import CkEditor from './component/CkEdictor'
export default {
    name: 'addNews',
    dicts: ['news_status', 'news_content_type','news_column_status'],
    components: {
        CkEditor
    },
    data() {
        return {
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                title: [
                    { required: true, message: "标题不能为空", trigger: "blur" }
                ],
            },
            newsTreeData:[]
        };
    },
    created() {
        this.getNewTreesData()
    },
    mounted() {
        if (this.$route.query.mode === 'edit') {
            this.getNewsDetail(this.$route.query.newsId)
        }
    },

    methods: {
        getNewTreesData(){
            getNewTrees().then(res=>{
                this.newsTreeData = res.data;
            })
        },
        getNewsDetail(newsId){
            this.reset();
            getNews(newsId).then(response => {
                this.form = response.data;
                this.$refs.ckeditor.editorData = response.data.content
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.newsId != null) {
                        updateNews(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.cancel()
                            this.back()
                        });
                    } else {
                        addNews(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.cancel()
                            this.back()
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel() {
            // this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                newsId: null,
                title: null,
                cover: null,
                content: null,
                link: null,
                type: null,
                publishTime: null,
                fkNewsColumnId: null,
                fkColumnChain: null,
                status: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null
            };
            this.resetForm("form");
            this.$refs.ckeditor.editorData = '请输入内容'
        },
        back() {
            this.$tab.closeOpenPage({ name: 'News' })
        }
    }
    
};
</script>
<style lang="scss" scoped>
    .app-container{
        width: 70%;
    }
</style>